<template>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <custom-nav-bar></custom-nav-bar>
    <view class="container">
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
        <swiper-item>
          <view class="swiper-item">
            <image class="swiper-pic" src="@/static/uni.png" alt="" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image class="swiper-pic" src="@/static/uni.png" alt="" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image class="swiper-pic" src="@/static/uni.png" alt="" />
          </view>
        </swiper-item>
      </swiper>
      <view class="btn-box">
        <view class="btn-item">
          <img src="@/static/svg/topic.svg" alt="话题">
          <text>话题</text>
        </view>
        <view class="btn-item">
          <img src="@/static/svg/optimization.svg" alt="优选">
          <text>优选</text>
        </view>
        <view class="btn-item">
          <img src="@/static/svg/preferential.svg" alt="特惠">
          <text>特惠</text>
        </view>
        <view class="btn-item">
          <img src="@/static/svg/collection.svg" alt="签到">
          <text>签到</text>
        </view>
      </view>
      <view class="notice-box">
        <uni-icons type="sound-filled" size="20" color="#FC4024"></uni-icons>
        <text class="content">自营家电清洗服务上线</text>
        <button class="detail" type="primary" size="mini">详情</button>
      </view>
      <view class="brand-direct-supply">
        <view class="supply-header">
          <text class="title">品牌制造商提供</text>
          <text class="more-btn">更多推荐</text>
          <uni-icons type="forward" size="30" color="#D0D0D0"></uni-icons>
        </view>
        <view class="supply-content">
          <view class="supply-item">
            <view class="title">
              <text>制造商1</text>
            </view>
            <image class="pic" src="@/static/uni.png"></image>
          </view>
          <view class="supply-item">
            <view class="title">
              <text>制造商2</text>
            </view>
            <image class="pic" src="@/static/uni.png"></image>
          </view>
          <view class="supply-item">
            <view class="title">
              <text>制造商3</text>
            </view>
            <image class="pic" src="@/static/uni.png"></image>
          </view>
          <view class="supply-item">
            <view class="title">
              <text>制造商4</text>
            </view>
            <image class="pic" src="@/static/uni.png"></image>
          </view>
        </view>
      </view>
      <view class="flash-promotion">
        <view class="promotion-header">
          <text class="title">秒杀专区</text>
          <text class="more-btn">更多秒杀商品</text>
          <uni-icons type="forward" size="30" color="#D0D0D0"></uni-icons>
        </view>
      </view>
      <view class="flash-promotion">
        <view class="promotion-header">
          <text class="title">新品好物</text>
          <text class="more-btn">更多推荐</text>
          <uni-icons type="forward" size="30" color="#D0D0D0"></uni-icons>
        </view>
      </view>
      <view class="flash-promotion">
        <view class="promotion-header">
          <text class="title">人气推荐</text>
          <text class="more-btn">更多推荐</text>
          <uni-icons type="forward" size="30" color="#D0D0D0"></uni-icons>
        </view>
      </view>
      <view class="flash-promotion">
        <view class="promotion-header">
          <text class="title">专题推荐</text>
          <text class="more-btn">更多推荐</text>
          <uni-icons type="forward" size="30" color="#D0D0D0"></uni-icons>
        </view>
      </view>
      <view class="flash-promotion">
        <view class="promotion-header">
          <text class="title">猜你喜欢</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue';

export default {
  name: 'Home',
  components: { CustomNavBar },
  data() {
    return {}
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  background: #EEEEEE;
  >view {
    background: #FFFFFF;
  }
}

.swiper {
  height: 200px;
  .swiper-pic {
    width: 100%;
    height: 200px;
  }
}

.btn-box {
  display: flex;
  padding: 10px 20px;

  .btn-item {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    img {
      width: 30px;
      height: 30px;
    }
  }
}

.notice-box {
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  .uni-icons {
    margin-right: 20px;
  }
  .content {
    font-size: 15px;
    color: #666666;
  }
  .detail {
    margin: 0;
    margin-left: auto;
  }
}

.brand-direct-supply {
  margin-top: 15px;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  .supply-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    .title {
      margin-right: auto;
    }
    .more-btn {
      color: #666666;
      font-size: 14px;
    }
  }
  .supply-content {
    display: flex;
    flex-flow: row wrap;
    .supply-item {
      width: calc(50% - 20px);
      margin: 10px 10px;
      .title {
        padding-left: 10px;
        padding-bottom: 5px;
      }
      .pic {
        width: 100%;
        height: 150px;
      }
    }
  }
}

.flash-promotion {
  margin-top: 15px;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  .promotion-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    .title {
      margin-right: auto;
    }
    .more-btn {
      color: #666666;
      font-size: 14px;
    }
  }
}
</style>